import { defineStore } from "pinia";
import { ref, watch } from "vue";

// 主题配置
const themes = {
  light: {
    name: "浅色",
    colors: {
      primary: "#409eff",
      secondary: "#67c23a",
      background: "#ffffff",
      surface: "#f5f7fa",
      text: "#303133",
      textSecondary: "#606266",
      border: "#dcdfe6",
      hover: "#ecf5ff",
      gradient: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
      aiGradient: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
    },
  },
  dark: {
    name: "深色",
    colors: {
      primary: "#409eff",
      secondary: "#67c23a",
      background: "#1d1e1f",
      surface: "#252526",
      text: "#e4e7ed",
      textSecondary: "#b1b3b8",
      border: "#3c3c3c",
      hover: "#2d2d30",
      gradient: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
      aiGradient: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
    },
  },
  blue: {
    name: "蓝色",
    colors: {
      primary: "#409eff",
      secondary: "#67c23a",
      background: "#f0f4f8",
      surface: "#e8f0f8",
      text: "#1a1a2e",
      textSecondary: "#16213e",
      border: "#c0d4e8",
      hover: "#d6e7f5",
      gradient: "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)",
      aiGradient: "linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)",
    },
  },
  green: {
    name: "绿色",
    colors: {
      primary: "#67c23a",
      secondary: "#409eff",
      background: "#f0f9f4",
      surface: "#e8f5ed",
      text: "#1a2e1a",
      textSecondary: "#162e16",
      border: "#c0e8c0",
      hover: "#d6f5d6",
      gradient: "linear-gradient(135deg, #11998e 0%, #38ef7d 100%)",
      aiGradient: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
    },
  },
  purple: {
    name: "紫色",
    colors: {
      primary: "#9c27b0",
      secondary: "#e91e63",
      background: "#faf5ff",
      surface: "#f3e8ff",
      text: "#2d1b3d",
      textSecondary: "#4a2c5a",
      border: "#d4b3e8",
      hover: "#e9d5ff",
      gradient: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
      aiGradient: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
    },
  },
};

// localStorage 键名
const STORAGE_KEY = "ai-chat-theme";

export const useThemeStore = defineStore("theme", () => {
  // 当前主题
  const currentTheme = ref("light");

  // 从 localStorage 恢复主题
  const restoreTheme = () => {
    try {
      const savedTheme = localStorage.getItem(STORAGE_KEY);
      if (savedTheme && themes[savedTheme]) {
        currentTheme.value = savedTheme;
        applyTheme(savedTheme);
      } else {
        applyTheme(currentTheme.value);
      }
    } catch (error) {
      console.error("恢复主题失败", error);
      applyTheme(currentTheme.value);
    }
  };

  // 应用主题
  const applyTheme = (themeName) => {
    const theme = themes[themeName];
    if (!theme) return;

    const root = document.documentElement;
    const colors = theme.colors;

    // 设置 CSS 变量
    root.style.setProperty("--theme-primary", colors.primary);
    root.style.setProperty("--theme-secondary", colors.secondary);
    root.style.setProperty("--theme-background", colors.background);
    root.style.setProperty("--theme-surface", colors.surface);
    root.style.setProperty("--theme-text", colors.text);
    root.style.setProperty("--theme-text-secondary", colors.textSecondary);
    root.style.setProperty("--theme-border", colors.border);
    root.style.setProperty("--theme-hover", colors.hover);
    root.style.setProperty("--theme-gradient", colors.gradient);
    root.style.setProperty("--theme-ai-gradient", colors.aiGradient);

    // 设置 body 背景色
    document.body.style.backgroundColor = colors.background;
    document.body.style.color = colors.text;
  };

  // 切换主题
  const setTheme = (themeName) => {
    if (!themes[themeName]) {
      console.warn(`主题 "${themeName}" 不存在`);
      return;
    }

    currentTheme.value = themeName;
    applyTheme(themeName);

    // 保存到 localStorage
    try {
      localStorage.setItem(STORAGE_KEY, themeName);
    } catch (error) {
      console.error("保存主题失败", error);
    }
  };

  // 获取当前主题配置
  const getCurrentTheme = () => {
    return themes[currentTheme.value] || themes.light;
  };

  // 获取所有可用主题
  const getAvailableThemes = () => {
    return Object.keys(themes).map((key) => ({
      key,
      name: themes[key].name,
    }));
  };

  // 监听主题变化，自动应用
  watch(
    currentTheme,
    (newTheme) => {
      applyTheme(newTheme);
    },
    { immediate: false }
  );

  return {
    currentTheme,
    themes,
    setTheme,
    getCurrentTheme,
    getAvailableThemes,
    restoreTheme,
    applyTheme,
  };
});

